<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../css/resrt.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <script src="../js/detail.js"></script>
</head>

<body>
    <!-- 名字以及用户评价板块 -->
    <div class="xm-product-box">
        <div class="nav-bar w">
            <h2>米家互联网对开门冰箱 540L</h2>
            <a href="#">用户评价</a>
        </div>
    </div>

    <!-- 立即登录 -->
    <div class="login_place">
        <div class="login_place_word w">
            <span>为方便您购买，请提前登录</span>
            <a href="./login.html">立即登录 </a>
            <span class="iconfont icon-cuo"></span>
        </div>
    </div>

    <!-- 详情板块开始 -->
    <div class="page_box">
        <div class="page_info w">
            <!-- 整个放大镜 -->
            <div class="product_box">
                <!-- 有遮罩的盒子 -->
                <div class="small_box">
                    <div class="mask"></div>
                </div>

                <div class="big_box"></div>

                <div class="tab_img">
                    <img src="../detailimg/bx0.jpg" alt="">
                    <img src="../detailimg/bx1.jpg" alt="">
                    <img src="../detailimg/bx2.jpg" alt="">
                    <img src="../detailimg/bx3.jpg" alt="">
                </div>

            </div>

            <div class="product_con">
                <div class="product_title">
                    <h2 class="detail_name">米家互联网对开门冰箱 540L</h2>
                    <p class="sale_desc">「对开门爆款540L，4月17日20-24点到手价2699元！」「超大容量，分区存储，1级能效，风冷无霜，智能操控！」<br>
                        <span>风冷无霜/环绕出风/纤薄箱体/电脑控温,持久保鲜/智能互联</span>
                    </p>
                    <p class="title_ziy">小米自营</p>
                    <div class="price_info">
                        <span>2899元 </span><del>3699元</del>
                    </div>
                </div>

                <div class="address_box">
                    <i class="iconfont icon-wxbdingwei"></i>
                    <div class="address_con">
                        <p class="choice_address">
                            <span>北京</span>
                            <span>北京市</span>
                            <span>海淀区</span>
                            <span>清河街道</span>
                            <a href="#">修改</a>
                        </p>
                        <p class="you_goods">有现货</p>
                    </div>
                </div>

                <div class="option_box">
                    <p>选择颜色</p>
                    <span>深灰</span>
                </div>

                <div class="selected_list">
                    <div class="top_selected">
                        <p>米家互联网对开门冰箱 540L 深灰</p>
                        <span>2899元</span>
                        <del>3699元</del>
                    </div>
                    <div class="total_price">总计：2899元</div>
                </div>

                <div class="btn_box">
                    <div class="sale_btn"><a href="#">加入购物车</a></div>
                    <div class="favorite_btn"><a href="#">喜欢</a></div>
                </div>

                <div class="after_sale_info"><img src="../detailimg/img.png" alt=""></div>
            </div>
        </div>

        <!--商品详情等候的大图片板块  -->
        <div class="product_detail">
            <ul class="detail_banner w">
                <li><a href="#">商品详情</a><span>|</span></li>
                <li><a href="#">安装须知</a><span>|</span></li>
                <li><a href="#">售后政策</a></li>
            </ul>
            <div class="detail_item w">
                <img src="../detailimg/item01.jpg" alt="">
                <img src="../detailimg/item02.jpg" alt="">
                <img src="../detailimg/item03.jpg" alt="">
                <img src="../detailimg/item04.jpg" alt="">
                <img src="../detailimg/item05.jpg" alt="">
                <img src="../detailimg/item06.jpg" alt="">
                <img src="../detailimg/item07.jpg" alt="">
                <img src="../detailimg/item08.jpg" alt="">
                <img src="../detailimg/item09.jpg" alt="">
                <img src="../detailimg/item10.jpg" alt="">
                <img src="../detailimg/item11.jpg" alt="">
                <img src="../detailimg/item12.jpg" alt="">
                <img src="../detailimg/item13.jpg" alt="">
                <img src="../detailimg/item14.jpg" alt="">
                <img src="../detailimg/item15.jpg" alt="">
                <img src="../detailimg/item16.jpg" alt="">
                <img src="../detailimg/item17.jpg" alt="">
                <img src="../detailimg/item18.jpg" alt="">
                <img src="../detailimg/item19.jpg" alt="">
                <img src="../detailimg/item20.jpg" alt="">
                <p>官方微信</p>
                <img src="../detailimg/item21.jpg" alt="" class="img_move">
                <p>价格说明</p>
                <img src="../detailimg/item22.png" alt="" class="img_move1">
            </div>
        </div>
    </div>
</body>

</html>
<script src="../js/jquery.js"></script>
<script>
    let oMask = document.querySelector(".mask");
    let oSmallBox = document.querySelector(".small_box");
    let Tab = document.querySelector(".tab_img")
    let oBigBox = document.querySelector(".big_box")
    let oproductBox=document.querySelector(".product_box")
    let x = new Enlarge(oMask, oSmallBox, Tab, oBigBox,oproductBox)
   

//    滚动的距离超500px ，进行悬浮
window.onscroll = function() {
    $(".xm-product-box").css("position","sticky")
    // console.log($(".xm-product-box"));
    var ev=document.documentElement.scrollTop || document.body.scrollTop;
    // console.log(ev);
    if (ev >= 400) {
        $(".xm-product-box").css("position","sticky")
    } else {
        $(".xm-product-box").css("position","")
    }
}

// 立即登录板块
var Vnished=document.querySelector(".login_place>.login_place_word>.iconfont");
var oLoginPlace=document.querySelector(".login_place");
Vnished.onclick=function(){
    oLoginPlace.style.display="none";
}


// 加入购物车和喜欢板块的特效
// let oSaleBtn=document.querySelector(".sale_btn");
// let oFavoriteBtn=document.querySelector(".favorite_btn");
// oSaleBtn.addEventListener=("mouseover",function() {
//     oSaleBtn.style.backgroundColor="rgb(0, 0, 0, .7)"
// })



// function  getGoodsInfo(goodsId) {
//     $.get("../goodsAndShoppingCart/getGoodsInfo.php",{goodsId: goodsId} ,function(data) {
//         let htmlStr = `
//                             <p class="shop-name">
//                                 <span class="self">小米自营</span>
//                                 <span class="my-name">${data.goodsName}</span>
//                             </p>
//                             <p class="comfort">${data.beiyong1}</p>
//                             <p class="youhui">${data.beiyong2}</p>
//                             <p class="buy-more">${data.beiyong3}</p>
//                             <p class="area">${data.beiyong4}</p>
//                             <p class="buy-price">售价：
//                                 <span class="new-price">${data.goodsPrice}</span>
//                                 <del>${data.beiyong5}</del>
//                             </p> `

//             $(".buy-detail").html(htmlStr)
           

//         }, "json")

</script>
<!-- <script src="../goodsAndShoppingCart/getGoodsInfo.php"></script> -->